const Merge = require('webpack-merge')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
const base = require('./webpack.base')

// 继承自 `webpack.base.js`
module.exports = Merge.merge(base, {
	mode: 'development',
	entry: {
		// 入口指向 `entry-client.js` 文件
		client: path.join(__dirname, './src/entry-client.js')
	},
	output: {
		publicPath: '/'
	},
	module: {
		rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]
	},
	plugins: [
		// 这里使用 webpack-manifest-plugin 记录产物分布情况
		// 方面后续在 `server.js` 中使用
		new WebpackManifestPlugin({ fileName: 'manifest-client.json' }),
		// 自动生成 HTML 文件内容
		new HtmlWebpackPlugin({
			templateContent: `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
</head>
<body>
  <div id="app" />
</body>
</html>
  `
		})
	]
})
